<template>
  <div class="container">
    <Search
      @selectSysChanged="selectSysChanged"
      @handle="handle"
      :systemOption="systemOption"
      :envOption="envOption"
      @updateType="updateType"
    ></Search>
    <mytable ref="mytable" :config="tableconfig">
      <div slot="mytablebody"></div>
      <!-- 操作 -->
      <template v-slot:operation="{ data }">
        <el-button type="primary" @click="detail(data)">查看</el-button>
        <el-button type="primary" @click="edit(data)">编辑</el-button>
        <el-button type="primary" @click="del(data)">删除</el-button>
      </template>
      <!-- 操作 -->
    </mytable>

    <AddMongodb
      ref="AddMongodb"
      :title="title"
      :systemOption="addSystemOption"
      :envOption="addEnvOption"
      @selectSysChanged="selectSysChanged"
      @save="save"
      @updateType="updateType"
    ></AddMongodb>

    <drawer
      ref="drawer"
      :data="selectItem"
      title="mongodb"
      :columns="columns"
    ></drawer>

    <DialogMessage
      :message="message"
      :isShowDialog="isShowDialog"
      @confirm="confirm"
    ></DialogMessage>
  </div>
</template>

<script>
import Search from "./components/Search.vue";
import mytable from "@/components/table/index.vue";
import drawer from "@/components/drawer.vue";
import AddMongodb from "./components/AddMongodb.vue";
import DialogMessage from "@/components/DialogMessage.vue";
import { columns, tableconfig } from "./data/configData.js";
import { getEnvironmentDropDown } from "@/api/configuration/environmentApi";
import { getSystemData } from "@/api/configuration/systemApi";
import { changeParam } from "@/utils/helper";
import {
  addMongodb,
  delMongodb,
  getMongodbData,
} from "@/api/configuration/dbApi";
export default {
  components: {
    Search,
    mytable,
    drawer,
    AddMongodb,
    DialogMessage,
  },
  data() {
    return {
      operationType: 1, //1-列表页 2.新增页面
      systemOption: [],
      envOption: [],
      addSystemOption: [],
      addEnvOption: [],
      title: "",
      isShowDialog: false,
      message: "删除这条记录？",
      columns,
      tableconfig,
      selectItem: "",
      allItem: {
        id: "-1",
        name: "全部",
      },
      searchObj: {
        id: "",
        name: "",
        systemId: "",
        systemName: "",
        environmentId: "",
        environmentName: "",
        pageNo: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    handle(func, data) {
      this[func](data);
    },
    search(data) {
      this.searchObj.pageNo = 1;
      this.tableconfig.currentpage = 1;
      this.searchObj = { ...this.searchObj, ...data };
      this.getDbList();
    },
    async save(data) {
      const res = await addMongodb(data);
      if (res && res.success) {
        this.$message.success(res.message);
        await this.getDbList();
      }
      this.$refs.AddMongodb.close();
    },
    updateType() {
      this.operationType = 1;
      this.getEnvList();
    },
    selectSysChanged(id) {
      this.getEnvList(id);
    },
    detail(data) {
      this.selectItem = data;
      this.$refs.drawer.open(data);
    },
    add() {
      this.title = "新增mongodb";
      this.operationType = 2;
      this.getEnvList();
      this.$refs.AddMongodb.open();
    },
    edit(data) {
      this.title = "编辑mongodb";
      this.operationType = 2;
      this.getEnvList();
      this.$refs.AddMongodb.open(data);
    },
    del(data) {
      this.isShowDialog = true;
      this.selectItem = data;
    },
    async confirm(type) {
      if (type == 1) {
        const { id } = this.selectItem;
        const res = await delMongodb({ id });
        if (res && res.success) {
          this.$message.success(res.message);
          if (this.tableconfig.tabledata.length == 1) {
            this.tableconfig.currentpage--;
            this.searchObj.pageNo = this.tableconfig.currentpage;
          }
          await this.getDbList();
        }
      }
      this.isShowDialog = false;
    },
    async getSystemList() {
      const params = { name: "", pageNo: 1, pageSize: 9999 };
      const res = await getSystemData(changeParam({ ...params }));
      if (res && res.success) {
        const {
          result: { list },
        } = res;
        this.systemOption = [...list];
        this.systemOption.unshift(this.allItem);
        this.addSystemOption = [...list];
        console.log(this.systemOption);
      }
      console.log(res);
    },
    async getEnvList(systemId = "") {
      const params = { systemId };
      const res = await getEnvironmentDropDown(changeParam({ ...params }));
      if (res && res.success) {
        const { result: list } = res;
        if (this.operationType == 1) {
          this.envOption = [...list];
          this.envOption.unshift(this.allItem);
        } else {
          this.addEnvOption = [...list];
        }
      }
    },
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.getDbList();
    },
    handleCurrentChange(value) {
      this.tableconfig.currentpage = value;
      this.searchObj.pageNo = value;
      this.getDbList();
    },
    async getDbList() {
      const res = await getMongodbData(changeParam({ ...this.searchObj }));
      if (res && res.success) {
        const {
          result: { list, total },
        } = res;
        this.tableconfig.tabledata = list || [];
        this.tableconfig.total = total;
      }
    },
    initData() {
      this.getSystemList();
      this.getEnvList();
      this.getDbList();
    },
  },
  created() {
    this.type = this.$route.params.type;
    this.initData();
  },
};
</script>
<style lang="scss" scoped>
.container {
}
</style>
